<template>
  <div class="index">
    <el-descriptions title="关于项目的一些信息"
                     direction="vertical"
                     :column="4"
                     :size="size"
                     border>
      <el-descriptions-item label="项目名">Vue3_shop_demo</el-descriptions-item>
      <el-descriptions-item label="简介">前后端分离的后台管理系统</el-descriptions-item>
      <el-descriptions-item label="开发者">Tsix</el-descriptions-item>
      <el-descriptions-item label="邮箱"
                            :span="2">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-gmail"></use>
        </svg>
        tsix2019@gmail.com
      </el-descriptions-item>
      <el-descriptions-item label="个人主页">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-logo_github"></use>
        </svg>
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-gitee"></use>
        </svg>
      </el-descriptions-item>
      <el-descriptions-item label="联系我">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-QQ"></use>
        </svg>
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="前端使用到的技术"
                     border
                     class="demo_info_2"
                     :column="4"
                     :size="size"
                     direction="vertical"
                     :style="blockMargin">
      <el-descriptions-item label="项目名">
        vue3_shop_demo
      </el-descriptions-item>
      <el-descriptions-item label="技术栈">
        <el-link type="success"
                 :underline='false'>Vue3 + axios + elementUi plus + Echarts + Vuex + Route</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="Coder"
                            :span="2">Tsix</el-descriptions-item>
      <el-descriptions-item label="Remarks">
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Gitee地址">
        <el-link type="primary"
                 :underline='false'>{{gitUrl}}</el-link>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="后端使用到的技术"
                     border
                     class="demo_info_2"
                     :column="4"
                     :size="size"
                     direction="vertical"
                     :style="blockMargin">
      <el-descriptions-item label="项目名">
        node-api-server
      </el-descriptions-item>
      <el-descriptions-item label="技术栈">
        <el-link type="success"
                 :underline='false'>node + express + mysql + jwt + json + aaa + xuexi</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="Coder"
                            :span="2">Tsix</el-descriptions-item>
      <el-descriptions-item label="Remarks">
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Gitee地址">
        <el-link type="primary"
                 :underline='false'>{{nodeUrl}}</el-link>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: 'index',
  setup() {
    const QQUrl = reactive('https://qm.qq.com/cgi-bin/qm/qr?k=FgqlXm0diV3MQiGqW35AKM8X07REX9PB&noverify=0')
    const gitUrl = reactive('https://gitee.com/Tsix666/vue3_shop_demo.git')
    const nodeUrl = reactive('https://gitee.com/Tsix666/node-api-server.git')
    return { QQUrl, gitUrl, nodeUrl };
  },
});
</script>

<style scoped lang="less">
.icon {
  margin-right: 10px;
  cursor: pointer;
}
.demo_info_2 {
  margin-top: 30px;
}
</style>